<template>
  <div class="login-page">
    <div class="login-main">
      <el-card class="box-card">
        <!-- 在普通元素上，可以直接使用slot标签，这个是2.6以前的就写法，vue还没有废弃 -->
        <!-- 新语法是必须放在 template标签上面，  v-slot:header 简写 #header -->
        <!-- 2.6版本 引入的新语法， 和vue3一样 -->
        <div slot="header">
          黑马面经运营后台
        </div>
        <el-form :model="ruleForm" :rules="rules" ref="formRef" label-width="100px" :label-position="'top'">
          <el-form-item label="用户名：" prop="username">
            <el-input v-model="ruleForm.username"></el-input>
          </el-form-item>
          <el-form-item label="密码：" prop="password">
            <el-input type="password" v-model="ruleForm.password"></el-input>
          </el-form-item>
          <el-form-item class="form-item-btn">
            <el-button type="primary" @click="submitForm">登录</el-button>
            <el-button @click="resetForm">重置</el-button>
          </el-form-item>
        </el-form>
      </el-card>
    </div>
  </div>
</template>

<script>
export default {
  name: 'LoginIndex',
  data () {
    return {
      // 表单对象里面的属性，可以随便写，但是尽量和服务器接口需要的参数名称保持一致
      ruleForm: {
        username: '',
        password: ''
      },
      // rules:是一个对象，里面是防止各种各样的校验规则的
      rules: {
        username: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
          { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { min: 5, max: 18, message: '长度在 5 到 18 个字符', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    submitForm () {
      this.$refs.formRef.validate(async (a, b) => {
        if (a) {
          console.log(1)

          const res = await this.$store.dispatch('user/loginActions', { username: this.ruleForm.username, password: this.ruleForm.password })

          console.log(2)
          if (res) {
            // 就想在这里进行路由跳转
            this.$router.push('/dashboard')
          }

          // const res = await loginRequest({ username: this.ruleForm.username, password: this.ruleForm.password })
          // console.log(2, res)
          // 因为请求成功以后，需要将token储存在vuex里面， 那我们就干脆去vuex里面发请求，在这里只需要调用action
        }
      })
    },
    // submitForm () {
    //   this.$refs.formRef.validate(async (a, b) => {
    //     if (a) {
    //       // 只有promise才能使用 then catch ----  new Promise() 得到一个promise对象。 axios发请求，别人封装的代码的底层就是用的new Promise() --- new XMLHttpRequest()
    //       // loginRequest({ username: this.ruleForm.username, password: this.ruleForm.password }).then(res => {
    //       //   console.log('请求成功:', res)
    //       // })
    //       // async  await 也是针对promise来写的代码。 await 后面必须跟promise对象
    //       console.log(1)
    //       // 1 3 2 await是将 异步的代码 当初同步的“”形式“”， 本质上还是异步代码，假设请求需要10s才能返回，那么2的打印就需要等10s才会出来。 涉及到事件循环机制
    //       const res = await loginRequest({ username: this.ruleForm.username, password: this.ruleForm.password })
    //       console.log(2, res)
    //     }
    //   })
    // },
    // Form Attributes 是用在  <el-form 用在标签里面></el-form>
    // Form Events 是用在 <el-form @官网的事件名称即可></el-form>
    // Form-Item Slot 这个属性 使用用在 <el-form-item> 用在两个标签的中间的文档</el-form-item>
    // Form Methods 这个属性是通过 Form的 dom元素去访问   this.$refs.formRef.各种方法
    // submitForm () {
    //   // 2个方法解决this的指向问题， 在箭头函数es2015出现之前，我们使用自定义变量来解决this问题
    //   // 现在的代码，都推荐使用箭头函数来解决this问题。 箭头函数里面没有this，利用作用域链的机制，指向上一层作用域的this
    //   const that = this
    //   console.log(1, this)
    //   // this ----  函数里面的一个变量， 值：谁调用这个函数，函数内部的this值就指向谁。 构造函数里面的this== new出来的对象
    //   // vue里面this 值是 当前组件的实例对象
    //   this.$refs.formRef.validate((a, b) => { // 写function 普通函数，就会有问题
    //     console.log(2, this)
    //     // 回调函数有两个参数，第一个表示是否校验成功， 第二个表示校验失败的字段组成的对象
    //     if (a) {
    //       // 只要进入了这个if分支，表明用户名和密码都校验成功
    //       // 然后在发请求去登录
    //       loginRequest({ username: that.ruleForm.username, password: this.ruleForm.password }).then(res => {
    //         console.log('请求成功:', res)
    //       })
    //     }
    //   })
    // },
    resetForm () {
      // this.$refs.formRef 这个是获取 表单的dom元素，重置的话，调用官网给我提供的方法
      this.$refs.formRef.resetFields()
    }
  }
}
</script>

<style lang="scss" scoped>
.login-page {
  height: 100%;
  // 背景颜色
  background-color: #e2e1e1;
  // 背景图片
  background-image: url('@/assets/login-bg.svg');
  // 图片是否重复 x轴重复 y轴重复  repeat-x  repeat-y
  background-repeat: no-repeat;
  // cover 表示将 盒子填满，会有一部分图片被裁剪掉
  // container 将图片在盒子里面完全展示，但是图片变大以后会有背景的黑边
  background-size: cover;
  // 图片的具体位置 上下左右中间等等
  background-position: center;
  display: flex;
  justify-content: center;
  align-items: center;
  .login-main {
    // border: 1px solid red;
  }
  // 在我们的组件；去深度修改element-ui的组件的样式，有可能会有 ""样式穿透"" 的问题
  // .login-page[data-v-xxxxx] .el-form-item-content;
  // .login-page .el-form-item__content
  // 如果是sass就添加  ::v-deep 在类的前面。 如果是less 就在类前面添加/deep/
  // 上面的内容是 ""深度选择器"" ，是一个面试题
  ::v-deep .el-form-item__content {
    width: 350px;
  }
  .form-item-btn {
    text-align: center;
  }
  .el-form--label-top .el-form-item__label {
    padding: 0
  }
}
</style>
